<style>
.class-content-search-loan-left {
	width: 150px;
	float: left;
	-moz-box-shadow: 5px 0px 5px #dddddd;
	-webkit-box-shadow: 5px 0px 5px #dddddd;
	box-shadow: 5px 0px 5px #dddddd;
	min-height: 400px;
	padding: 10px;
}

.class-content-search-loan-right {
	width: 780px;
	margin-left: 10px;
	float: left;
	padding-left: 10px;
}

.class-name-search-left {
	width: 140px;
	margin-right: 10px;
}

.class-inputtext-search-left {
	margin-right: 10px;
	width: 140px;
	height: 20px;
	padding: 5px;
}

.class-inputselect-search-left {
	margin-right: 10px;
	width: 152px;
	height: 30px;
	padding: 5px;
}

.class-records-search-line {
	margin-top: 20px;
}

.class-content-result-search, .class-menu-result-search, .class-result-line-search {
	width: 790px;
}

.class-menu-title {
	height: 50px;
	background: #8DAE48;
	color: #FFF;
	font-weight: bold;
	font-size: 13px;
	text-align:center;
	line-height: 50px;
}

.class-result-checkbox {
	width: 20px;
}

.class-result-rowend {
	width: 10px;
}

.class-menu-line {
	cursor: default;
	float: left;
	min-height: 50px;
	text-align: center;
	line-height: 50px;
}

.class-line-bank {
	width: 110px;
}

.class-title-border-right {
	border-right: 1px solid;
}

.class-line-mucdichvay {
	width: 110px;
}

.class-line-amount {
	width: 120px;
}

.class-line-time, .class-line-rate {
	width: 85px;
}

.class-line-phinam {
	width: 120px;
}

.class-line-month {
	width: 124px;
}

.class-line {
	position: relative;
}

.color1 {
	background: #F1F1F1;
	overflow: hidden;
}
.class-checkbox {
	margin-top: 18px;
}

.box-shopcard {
	position: fixed;
	width: 200px;
	height: 100px;
	border: 1px solid;
	border-top-right-radius: 10px;
	-moz-box-shadow: 5px -5px 8px #dddddd;
	-webkit-box-shadow: 5px -5px 8px #dddddd;
	box-shadow: 5px -5px 8px #dddddd;
	bottom: 0px;
	left:0px;
	z-index: 30;
	background: #FFF;
}

/*.close-reveal-shopcard {
	font-size: 22px;
	line-height: .5;
	position: absolute;
	top: 8px;
	right: 11px;
	color: #000;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	font-weight: bold;
	cursor: pointer;
}*/

.box-shopcard-small {
	position: fixed;
	width: 200px;
	height: 30px;
	border: 1px solid;
	border-top-right-radius: 10px;
	-moz-box-shadow: 5px -5px 8px #dddddd;
	-webkit-box-shadow: 5px -5px 8px #dddddd;
	box-shadow: 5px -5px 8px #dddddd;
	bottom: 0px;
	left:0px;
	background: #CCC;
	cursor: pointer;
	display: none;
	z-index: 30;
}

.class-content-result-loading {
	position: fixed;
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 100;
	top: 0;
	left: 0;
	display: none;
}

#paging-loading {
    background: url(<?php echo($host) ?>images/paging_loading.gif) no-repeat center;
    height: 13px;
    margin: auto;
    width: 100%;
	bottom: 5px;
	clear: both;
	display: none;
}

.class-div-fly {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #f1f1f1;
    z-index: 100;
    height: 100px;
    margin-top: -50px;
    min-width: 100px;
    margin-left: -50px;
	border-top-right-radius: 10px;
	-moz-box-shadow: 4px -5px 8px #dddddd;
	-webkit-box-shadow: 4px -5px 8px #dddddd;
	box-shadow: 4px -5px 8px #dddddd;
}
</style>
<div class="text12" style="margin: auto; width: 970px; height: 11px; margin-top: 11px; color: #0a8bd9;">
	<u><a href="<?php echo($host) ?>" class="text12" style="color: #0080d6;">Trang chủ</a></u>&gt; <a href="#" class="text12" style="color: #4c4c4c;">Tìm kiếm thẻ tín dụng tốt nhất</a>
</div>
<div style="clear:both; height: 15px;"></div>
<div class="class-content-result-loading"></div>
<div style="width:980px; margin: auto;">
	<div class="class-content-search-loan-left">
    	<div class="class-records-search-line">
        	<span class="class-name-search-left">Hạn mức thẻ</span>
            <select class="class-inputselect-search-left" id="form_search_hanmuc" onchange="loaddatasearch()">
            	<option value="">-- Tất Cả --</option>
                <?php
				for($i = 1; $i < 100; $i+=2) {
					echo('<option value="'.$i.'000000">'.$i.'.000.000</option>');
				}
				?>
            </select>
        </div>
        <div class="class-records-search-line">
        	<span class="class-name-search-left">Loại thẻ</span>
            <select class="class-inputselect-search-left class-mucdichvay-search" id="selectcardtype" onchange="loaddatasearch()"><option value="">-- Tất Cả --</option></select><br /><br />
            <select class="class-inputselect-search-left class-mucdichvay-search" id="selectcardlevel" onchange="loaddatasearch()"><option value="">-- Tất Cả --</option></select>
        </div>
        <div class="class-records-search-line">
        	<span class="class-name-search-left">Phí rút tiền mặt</span>
            <select class="class-inputselect-search-left class-mucdichvay-search" id="form_search_ruttienmat" onchange="loaddatasearch()"><option value="">-- Tất Cả --</option><option value="Miễn phí">Miễn phí</option><option value="Có phí">Có phí</option></select>
        </div>
        <div class="class-records-search-line">
        	<span class="class-name-search-left">Khu vực cấp thẻ</span>
            <select class="class-inputselect-search-left class-mucdichvay-search" id="form_search_khuvuc" onchange="loaddatasearch();"><option value="">-- Tất Cả --</option><option value="Miền Bắc">Miền Bắc</option><option value="Miền Trung">Miền Trung</option><option value="Miền Nam">Miền Nam</option></select>
        </div>
    </div>
    <div class="class-content-search-loan-right">
    	<div class="class-content-result-search" style="border: 1px solid; overflow: hidden; border-top-left-radius: 5px; border-top-right-radius: 5px;">
        	<div class="class-menu-result-search">
            	<div class="class-result-checkbox class-menu-title class-menu-line" style="border-top-left-radius: 5px;"></div>
                <div class="class-line-bank class-menu-title class-menu-line class-title-border-right" style="cursor: pointer;" title="Ngân Hàng">Ngân hàng</div>
                <div class="class-line-mucdichvay class-menu-title class-menu-line class-title-border-right" style="cursor: pointer;" title="Loại Thẻ Tín Dụng">Loại hhẻ</div>
                <div class="class-line-amount class-menu-title class-menu-line class-title-border-right" style="cursor: pointer;" title="Chuyển Khoản Số Dư">Chuyển khoản</div>
                <div class="class-line-rate class-menu-title class-menu-line class-title-border-right" style="cursor: pointer;" title="Lãi Suất Thẻ Tín Dụng">Lãi suất</div>
                <div class="class-line-phinam class-menu-title class-menu-line class-title-border-right" style="cursor: pointer;" title="Lệ Phí Hằng Năm">Phí thường niên</div>
                <div class="class-line-month class-menu-title class-menu-line class-title-border-right" style="cursor: pointer;" title="Ngày Miễn Phí">Số ngày miễn phí</div>
                <div class="class-line-time class-menu-title class-menu-line" style="cursor: pointer;" title="Chi Tiết">Xem chi tiết</div>
                <div class="class-result-rowend class-menu-title class-menu-line" style="border-top-right-radius: 5px;"></div>
            </div>
            <div class="class-content-insert-result-line">
                <!--<div style="clear:both;"></div>
                <div class="class-result-line-search">
                    <div class="class-result-checkbox class-menu-line"><span class="class-line"><input type="checkbox" class="class-checkbox" value="1234" /></span></div>
                    <div class="class-line-bank class-menu-line"><span class="class-line"><img src="images/logobanks/1369639988.jpg" width="100px" style="margin-top:5px;" /></span></div>
                    <div class="class-line-mucdichvay class-menu-line"><span class="class-line"><img src="images/logobanks/1369639988.jpg" width="100px" style="margin-top:5px;" /></span></div>
                    <div class="class-line-amount class-menu-line"><span class="class-line">500000000000</span></div>
                    <div class="class-line-rate class-menu-line"><span class="class-line">2%</span></div>
                    <div class="class-line-phinam class-menu-line"><span class="class-line">100000</span></div>
                    <div class="class-line-month class-menu-line"><span class="class-line">2 Ngày</span></div>
                    <div class="class-line-time class-menu-line"><span class="class-line"><a><img src="images/icon_chitiet.gif" width="60px" style="margin-top: 15px; margin-left: 20px; cursor: pointer;" title="Xem chi tiết" /></a></span></div>
                    <div class="class-result-rowend class-menu-line"></div>
                </div>-->
            </div>
        </div>
    </div>
</div>

<div style="clear:both;"></div>
<div class="box-shopcard">
	<div style="height: 30px; background:#8DAE48; margin-top:-5px; border-top-right-radius: 10px; cursor: pointer;" class="close-reveal-shopcard">
    	<h3 style="margin-top: 5px; margin-left: 10px; color: #FFF; text-align: center;">Có <span style="color:#F00;" class="box-shopcard-countsp">0</span> sản phẩm so sánh</h3>
    </div>
    <div">
    	<input type="button" style="margin-top: 5px; cursor: pointer; width: 200px; height:40px; text-align: center; border: 0px; font-size: 16px; font-weight:bold; font-family: Tahoma, Geneva, sans-serif; background: #bfd255; background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d)); background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); background: -o-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); background: -ms-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );" value="So Sánh" class="box-shopcard-button-submit" />
        <span style="color:#690; font-size:12px; padding-left: 30px;">So sánh tối đa 4 sản phẩm</span>
    </div>
	<!--<a class="close-reveal-shopcard">&#215;</a>-->
</div>
<div class="box-shopcard-small"><h3 style="margin-top: 5px; margin-left: 10px; color: #FFF;">Có <span style="color:#F00;" class="box-shopcard-countsp">0</span> SP So Sánh</h3></div>
<div id="paging-loading" style=""></div>
<script>
$(document).ready(function(e) {
	loadcardtype();
	loadcardlevel();
	
	
	var arridprocheck = new Array();
	// load first
	$('.box-shopcard-countsp').html(countidprocheck() + "/4");
	dragbackgroundresult();
	
	loaddata();
	
	// drag backgroud
	function dragbackgroundresult() {
		var i = 1;
		$('.class-result-line-search').each(function() {
			if(i == 0) {
				$(this).addClass('color1');
				i = 1;
			} else {
				i = 0;
			}
		});
	}
	
	function loadcardtype() {
		$.ajax({
			url: "<?php echo($host) ?>src/ajax/ajaxcardtype.php",
			type: "post",
			data: {act:'getall'},
			dataType:"json",
			success: function(response) {
				html = '';
				$.each(response, function(entryIndex, entry){
					html += '<option value="' + entry[0] + '">' + entry[1] + '</option>';
				});
				$('#selectcardtype').append(html);
			}
		});
	}
	
	function loadcardlevel() {
		$.ajax({
			url: "<?php echo($host) ?>src/ajax/ajaxcardlevel.php",
			type: "post",
			data: {act:'getall'},
			dataType:"json",
			success: function(response) {
				html = '';
				$.each(response, function(entryIndex, entry){
					html += '<option value="' + entry[0] + '">' + entry[1] + '</option>';
				});
				$('#selectcardlevel').append(html);
			}
		});
	}
	
	$('.class-checkbox').each(function() {
		var value = $(this).attr('value');
		if(checkexitsarridpro(value)) {
			$(this).attr("checked", "checked");
		} else {
			$(this).attr("checked", false);
		}
	});
	//-----------------------------------
	function countidprocheck() {
		return arridprocheck.length;
	}
	
	//key press search textbox
	$(document).on("keypress", "#form_search_amount", function(ev) {
		var keycode = (ev.keyCode ? ev.keyCode : ev.which);
		if (keycode == 13) {
			var amount = $.trim($('#form_search_amount').val());
			var re_num = /^([^0-9]*)$/;
			if(amount.length > 0) {
				if(re_num.test(amount)) {
					alert("Bạn phải nhập là số");
					$('#form_search_amount').val("");
					return false;
				}
			}
			// load data
			loaddata();
		}
	});
	
	loaddatasearch = function() {
		loaddata();
	}
	
	function loaddata() {
		var hanmucthe = $('#form_search_hanmuc').val();
		var loaithe = $('#selectcardtype').val();
		var level = $('#selectcardlevel').val();
		var tienmat = $('#form_search_ruttienmat').val();
		var khuvuc = $('#form_search_khuvuc').val();
		
		$('.class-content-result-loading').show();
		
		
		$('.class-content-insert-result-line').html('');
		$.ajax({
			type: "POST",
			url: "<?php echo($host) ?>control/ajaxsearchcarddetail.php",
			data:{act: 'load', hmthe: hanmucthe, lt: loaithe, lv: level, tm: tienmat, kv: khuvuc},
			dataType: "json",
			success: function(response){
				if(response != "null") {
					for(i = 0; i < response.length; i++) {
						draginsertrow(response[i][0], response[i][1], response[i][2], response[i][3], response[i][4], response[i][5], response[i][6], response[i][7], response[i][8], response[i][9], response[i][10]);
					}
					
					arridprocheck = new Array();
					$('.box-shopcard-countsp').html(countidprocheck() + "/4");
					dragbackgroundresult();
				} else {
					$('.class-content-insert-result-line').html('<div class="class-result-line-search" style="background:#F1F1F1; text-align: center;">Không Tìm Thấy Dữ Liệu</div>');
				}
				$('.class-content-result-loading').hide();
			}
		});
	}
	
	function draginsertrow(id, bank, bankname, banklogo, ctname, ctlogo, btranfer, mtranfer, rate, phinam, freeday) {
		var html = '<div style="clear:both;"></div>';
            html +='<div class="class-result-line-search">';
            html +='<div class="class-result-checkbox class-menu-line"><span class="class-line"><input type="checkbox" class="class-checkbox" value="' + id + '" /></span></div>';
            html +='<div class="class-line-bank class-menu-line"><span class="class-line"><img title="' + bankname + '(' + bank + ')" src="<?php echo($host) ?>' + banklogo + '" width="100px" style="margin-top:5px; margin-bottom:5px;" /></span></div>';
            html +='<div class="class-line-mucdichvay class-menu-line"><span class="class-line"><img src="<?php echo($host) ?>' + ctlogo + '" width="100px" style="margin-top:5px;" tilte="' + ctname + '" alt="' + ctname + '" /></span></div>';
            html +='<div class="class-line-amount class-menu-line"><span class="class-line">' + btranfer + '</span></div>';
            html +='<div class="class-line-rate class-menu-line"><span class="class-line">' + rate + '%</span></div>';
            html +='<div class="class-line-phinam class-menu-line"><span class="class-line">' + phinam + '</span></div>';
            html +='<div class="class-line-month class-menu-line"><span class="class-line">' + freeday + ' Ngày</span></div>';
			html +='<div class="class-line-time class-menu-line"><span class="class-line"><a href="index.php?cont=detail-card-so-sanh&id='+id+'"><img src="<?php echo($host) ?>images/icon_chitiet.gif" width="60px" style="margin-top: 15px; margin-left: 20px; cursor: pointer;" title="Xem chi tiết" /></a></span></div>';
            html +='<div class="class-result-rowend class-menu-line"></div>';
            html +='</div>';
		$('.class-content-insert-result-line').append(html).children(".class-result-line-search:last").hide().fadeIn(200);
	}
	
    $(document).on('click', '.class-checkbox', function() {
		elem = $(this);
		value = elem.attr('value');
		logobank = elem.parent().parent().siblings('.class-line-bank').children().find('img').attr('src');
		
		if(elem.is(':checked')) {
			if(countidprocheck() < 4) {//sscom
				$('.class-content-result-loading').show();
				$.ajax({
					type: "POST",
					url: "<?php echo($host) ?>control/ajaxsearchcarddetail.php",
					data:{act: 'sscom', pr: 'add', idre: value},
					dataType: "json",
					success: function(response){
						if(response == "ok") {
							arridprocheck.push(value);
							$('.box-shopcard-countsp').html(countidprocheck() + "/4");
							$('body').append('<div class="class-div-fly"><img src="'+logobank+'" height="80px" style="margin: 10px;" /></div>');
							$('.class-div-fly').fadeIn(200, function() { $('.class-div-fly').show(); clickfly();});
						} else {
							elem.attr("checked", false);
						}
						$('.class-content-result-loading').hide();
					}
				});
			} else {
				elem.attr("checked", false);
				alert("Bạn chỉ được phép so sánh nhiều nhất là 4 mục");
			}
		} else {
			$('.class-content-result-loading').show();
			$.ajax({
				type: "POST",
				url: "<?php echo($host) ?>control/ajaxsearchcarddetail.php",
				data:{act: 'sscom', pr: 'del', idre: value},
				dataType: "json",
				success: function(response){
					if(response == "ok") {
						arridprocheck.splice($.inArray(value, arridprocheck),1);
						$('.box-shopcard-countsp').html(countidprocheck() + "/4");
					} else {
						elem.attr("checked", "checked");
					}
					$('.class-content-result-loading').hide();
				}
			});
		}
	});
	
	function clickfly() {
		var height = 400;
		var width = ($(window).width()/2) - $('.class-div-fly').width();
		$('.class-div-fly').animate({"top" : "+="+height+"px", "left" : "-="+width+"px"}, 1000, function() {
			$('.class-div-fly').fadeOut(300, function(){$('.class-div-fly').remove(); });
		});
	}
	
	function checkexitsarridpro(id) {
		for(var i in arridprocheck) {
			if(arridprocheck[i] == id) {
				return true;
			}
		}
		return false;
	};
	
	$(document).on('click', '.box-shopcard-small', function() {
		$(this).fadeOut(0, function() {
			$(this).hide();
			$('.box-shopcard').fadeIn(500, function() {
				$('.box-shopcard').show();
			});
		});
	});
	
	$(document).on('click', '.close-reveal-shopcard', function() {
		$('.box-shopcard').fadeOut(200, function() {
			$('.box-shopcard').hide();
			$('.box-shopcard-small').show();
		});
	});
	
	$(document).on('click', '.box-shopcard-button-submit', function() {
		if(countidprocheck() == 0) {
			alert("Vui lòng chọn danh mục cần so sánh \nBằng cách tích các ô đầu dòng mà bạn muốn so sánh");
		} else if(countidprocheck() <= 4) {
			window.location = "<?php echo($host) ?>the-tin-dung-sosanh.html";
		}
	});
	
});
</script>